{% extends "base.html.twig" %}

{% block title "Common" %}

{% block head %}

    <link rel="stylesheet" href="{{ asset('css/style.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/waterwheelCarousel.css') }}" />

{% endblock %}

{% block logo %}	
	<a class="navbar-brand" href="">SELV - book</a>
{% endblock %}


{% block maincontent %}
	{% if error %}
		<div class="error-box">
			<div class="error-message-startseite">{{ error.message|trans }}</div>
		</div>
	{% endif %}

	<div class="jumbotron">
        <p>
        
        <div id="carousel">
        	{% for item in startimage %}
	      		<a href="#"><img src="{{ item.image }}" id="item-{{ item.id }}" /></a>
            {% endfor %}
        </div>    
        </p>
        <p style="text-align:center;">Willkommen im SELV - book</p>
	</div>        
{% endblock %}

 

{% block loginform %}

  <form class="navbar-form navbar-right" action="{{ path('_secure_check') }}" method="post">
    <div class="form-group">
      <input type="text" placeholder="Username" name="_username" class="form-control">
    </div>
    <div class="form-group">
      <input type="password" name="_password" placeholder="Password" class="form-control">
    </div>
    <input type="hidden" name="_target_path" value="/auth/security/event/overview" />
    <button type="submit" class="btn btn-success">Sign in</button>
  </form>

{% endblock %}


{% block jsscript %}
	<script type="text/javascript" src="{{ asset('js/jquery.waterwheelCarousel.js') }}"></script>
	 <script type="text/javascript">
	      $(document).ready(function () {
	        var carousel = $("#carousel").waterwheelCarousel({
	          flankingItems: 3,
	          movingToCenter: function ($item) {
	            $('#callback-output').prepend('movingToCenter: ' + $item.attr('id') + '<br/>');
	          },
	          movedToCenter: function ($item) {
	            $('#callback-output').prepend('movedToCenter: ' + $item.attr('id') + '<br/>');
	          },
	          movingFromCenter: function ($item) {
	            $('#callback-output').prepend('movingFromCenter: ' + $item.attr('id') + '<br/>');
	          },
	          movedFromCenter: function ($item) {
	            $('#callback-output').prepend('movedFromCenter: ' + $item.attr('id') + '<br/>');
	          },
	          clickedCenter: function ($item) {
	            $('#callback-output').prepend('clickedCenter: ' + $item.attr('id') + '<br/>');
	          }
	        });
	
	        $('#prev').bind('click', function () {
	          carousel.prev();
	          return false
	        });
	
	        $('#next').bind('click', function () {
	          carousel.next();
	          return false;
	        });
	
	        $('#reload').bind('click', function () {
	          newOptions = eval("(" + $('#newoptions').val() + ")");
	          carousel.reload(newOptions);
	          return false;
	        });
	
	      });
	    </script>	
	
{% endblock %}